<template>
  <view>
	  <template v-if="props.title">
	    <uni-nav-bar fixed shadow :border="false" :title="props.title" left-icon="left"
	                 @clickLeft="onClickLeft">
	    <template #bottom>
	      <view class="uni-nav-bottom">
	        <uni-search-bar @confirm="searchList" v-model="name" placeholder="请输入搜索关键词"
	                        @clear="() => { name=''; searchList() }" @cancel="searchList" cancelButton="none"
	                        :radius="20">
	        </uni-search-bar>
	      </view>
	    </template>
	    </uni-nav-bar>
	  </template>
    <view class="container-wrap">
      <view class="top-wrap active">
        <uni-search-bar @confirm="searchList" v-model="name" placeholder="请输入搜索关键词"
                        @clear="() => { name=''; searchList() }" @cancel="searchList" cancelButton="none"
                        :radius="20"></uni-search-bar>
      </view>
      <view class="list-wrap common-wrap">
        <van-list  :finished="listFinished" finished-text="没有更多了" @load="loadMore">
          <ListItem :list="list"></ListItem>
        </van-list>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, watch, computed, getCurrentInstance} from 'vue';
import ListItem from "@/view/practice/listItem.vue";
import VanList from "@/components/vant/van-list/van-list.vue";
import mockData from "@/mock/index/configData.json"
const name = ref('');
const list = ref([]) // 课程列表
const listFinished = ref(false)
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const onClickLeft = () => {
  uni.navigateBack({delta: 1})
}
onMounted(()=>{
  getList()
})
const searchList = () => {
  getList(true)
}
const getList = (loadNew = false) => {
  if (loadNew)return;
  list.value=list.value.concat(mockData.practiceData || []);
  listFinished.value = true
}
const loadMore = () => {
  if (!listFinished.value) getList()
}
</script>

<style lang="scss" scoped>
.list-wrap {
  // padding-top: 70px;
  background-color: #F5F5F5;
}
</style>